<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>">
<!-- 引入公共meta -->
<jsp:include page="/static/iframe/import/_meta.jsp"></jsp:include>
<jsp:include page="/static/iframe/import/_header.jsp"></jsp:include>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>角色授权</title>
<link rel="stylesheet" href="static/iframe/x-admin/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css">
<link rel="stylesheet" href="static/iframe/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="static/iframe/bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
	<div class="page-container">
		<div class="zTreeDemoBackground">
			<!-- 资源编号 -->
			<input id="id" name="id" type="hidden">
		</div>
		<div id="menuContent" class="menuContent table-bordered"
			style="overflow-y: auto; height: 250px;">
			<ul id="role_grant_Tree" class="ztree" style="margin-top:5px;">
			</ul>
		</div>
		<div class="tooltip-demo"
			style="position: absolute; bottom: 10;left:25;">
			<button class="btn btn-primary" type="submit" onclick="grant()">
				<i class="glyphicon glyphicon-ok"></i>&nbsp;提交
			</button>
			&nbsp;
			<button class="btn btn-info" type="button" id="selectNodes">
				<i class="glyphicon glyphicon-check"></i>&nbsp;全选
			</button>
			&nbsp;
			<button class="btn btn-success" type="button" id="reset">
				<i class="glyphicon glyphicon-refresh"></i>&nbsp;重置
			</button>
		</div>
		<input type="hidden" id="roleId" value="${roleId}"/>
		<input type="hidden" id="resourceids" value="${resourceids}"/>
	</div>
<script type="text/javascript" src="static/plugins/jq/jquery-3.2.1.js"></script>
<script type="text/javascript" src="static/iframe/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/iframe/x-admin/lib/layer/layer.js"></script>
<script type="text/javascript" src="static/plugins/window/referparent.js"></script>
<script type="text/javascript" src="static/iframe/x-admin/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<!--[if lt IE 10]>
    <script type="text/javascript" src="static/plugins/input-placeholder/ieplaceholder.js"></script>
<![endif]-->	
<script type="text/javascript">
	//配置
	var setting = {
			//视图
			view:{
				dbClickExpand:true,
				selectedMulti:true,//是否允许多选
				txtSelectedEnable:true,//是否允许选中节点的文字
				autoCancelSelected:true,//不允许按下Ctrl键取消节点
			},
			//复选框打开显示
			check : {
				enable : true
			},
			data : {
				simpleData : {
					enable : true
				}
			},
			//回调方法
			callback : {
				onClick : onClick
			}
	};
	//点击节点时 回调方法
	function onClick(e,treeId,treeNode){
		//获取树 返回tree对象
		var zTree = $.fn.zTree.getZTreeObj("role_grant_Tree");
		//获取tree对象 中的所有节点  返回当前被选中的节点数据集合
		var nodes = zTree.getSelectedNodes();
		var v = ""; var id = "";
		//采用 jquery 的sort方法冒泡排序  升序
		nodes.sort(function compare(a, b) {
			return a.id - b.id;
		});
		for (var i = 0, l = nodes.length; i < l; i++) {
			v += nodes[i].resourceName + ",";
			id += nodes[i].id + ",";
		}
		if (id.length > 0)
			id = id.substring(0, id.length - 1);
		if (v.length > 0)
			v = v.substring(0, v.length - 1);
		return false;
	}
	//获取选中值
	 function getCheckedValue(){
		nodes  = treeObj.getChangeCheckedNodes(true);
		var result = '';
		if (nodes.length == 0) {
			layer.msg("请选择资源后，再提交！", {
				time : 1500,
				icon : 2
			});
			return false;
		}
		for (var i = 0; i < nodes.length; i++) {
			var halfCheck = nodes[i].getCheckStatus();
			console.info(halfCheck+'getCheckStatus');
			result += nodes[i].id + ',';
		}
		result = result.substring(0, result.lastIndexOf(","));
		return result;
	}
	//tree对象
     var treeObj;
	//加载事件
	$(function(){
			//var treeNodes;
			//获取数据
			$.getJSON('role/tree',function(data){
				//初始化tree
				
				$.fn.zTree.init($("#role_grant_Tree"), setting, data);
				treeObj = $.fn.zTree.getZTreeObj("role_grant_Tree");
				treeObj.checkAllNodes(false);
				treeObj.expandAll(true);
				var ids = $("#resourceids").val();
				
				if (ids.trim() != "") {
					var strs = ids.split(",");
					for (var j = 0; j < strs.length; j++) {
						//如果数据库没有的条件 则会发生  chkdisabled of null 错误
						var node = treeObj.getNodeByParam("id", strs[j]);
						//根据资源id选中节点
						treeObj.checkNode(node, true);
					}
				}
			});
			//重置所有勾选
			$("#reset").click(function() {
				treeObj.checkAllNodes(false);
			})
			//全部选中节点
			$("#selectNodes").click(function() {
				treeObj.checkAllNodes(true);
			});
	});
	
	//授权 获取选中的资源id
	function grant(){
		//调用fun_getCheckValue()方法获得选中的所有id，返回是以逗号隔开的字符串id
		var rids = getCheckedValue();
		console.info(rids);
		$.ajax({
			type:'post',
			url:"role/grant",
			dataType : 'json',
			data : {
				"roleId" : $("#roleId").val(),
				"rids" : rids
			},
			success:function(result){
				if(result.flag){
					layer.msg(result.msg, {
						icon : 1,
						time : 1000
					});
					setTimeout(referParent, 1000);
				}else{
					layer.msg(result.msg, {
						icon : 2,
						time : 1000
					});
					$.fn.zTree.getZTreeObj("role_grant_Tree").checkAllNodes(true);
				}
			}
		});
	}
</script>
</body>
</html>